<template>
	<view class="reply">
		<view class="item" v-for="i in content" :key="i">
			<view class="top">
				<image :src="i.avater||'/pagesB/static/微信图片_20201124091755.png'"></image>
				<view class="name">{{i.nickname}}</view>
				<view class="time">{{i.date_add}}</view>
			</view>
			<view class="center">{{i.content}}</view>
			<view class="bottom">{{i.to_content}}</view>
			<view class="yuan" v-if="i.is_read==1"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			content: [
				{
					message_id: '113',
					type: '4',
					name: '回复',
					title: '',
					content: '',
					date_add: '1509604503',
					is_read: '1',
					to_content: '测试发帖首次',
					foregin_type: '2',
					foregin_id: '120',
					nickname: 'gf',
					avater: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKgcV99GAth5sSrJhvHdokM9AVL2aZEXHkYE0osQ7F3uo8NTVypt7fEiaZ5tx5EBAd3VqicpMlRhr9w/132',
					action: {
						params: [
							{
								key: 'comment_id',
								value: '68'
							}
						],
						action_id: '9',
						jump: 'YZL8'
					}
				}
			],
			access_token:'',
			model:''
		};
	},
	onShow() {
		let _this=this
		uni.getSystemInfo({
		    success: function (res) {
				_this.model=res.model
		    }
		});
		if(uni.getStorageSync('access_token')){
		this.access_token=JSON.parse(uni.getStorageSync('access_token'))
		}
		this.$request('/app/message/getLikeMessages', 'post', {
			page: this.page,
			t:this.model,
			access_token:this.access_token
		}).then(res => {
			if(res.errcode==0){
				function dateTO(data) {
					//data为时间戳
					var date = new Date(data);
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
					// var strDate = Y + M + D; //转换为年月日
					return strDate;
				}
				res.content.forEach(v=>{
					v.date_add=dateTO(v.date_add * 1000)
				})
				this.consten=res.content
				}
		})
	},
	onReachBottom(){
		this.page=this.page++
		this.$request('/app/message/getLikeMessages', 'post', {
			page: this.page,
			t:this.model,
			access_token:this.access_token
		}).then(res => {
			if(res.data.errcode==0){
				function dateTO(data) {
					//data为时间戳
					var date = new Date(data);
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
					// var strDate = Y + M + D; //转换为年月日
					return strDate;
				}
				res.content.forEach(v=>{
					v.date_add=dateTO(v.date_add * 1000)
				})
				res.data.content.forEach(v=>{
				this.consten.push(v)
	
				})
				}
		})
	}
};
</script>

<style lang="less">
.reply {
	height: 100%;
	background-color: #f3f4f5;
	padding-top: 20rpx;
	overflow-x: scroll;
	.item{
		padding: 30rpx 30rpx 30rpx 56rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		position: relative;
		.yuan{
			position: absolute;
			top: 48rpx;
			left: 24rpx;
			width: 18rpx;
			height: 18rpx;
			background: #DB1B22;
			border-radius: 50%;
		}
		.top{
			display: flex;
			align-items: center;
			image{
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
			.name{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #00609B;
				margin-right: 16rpx;
			}
			.time{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA5A8;
				flex: 1;
			}
			.buttom{
				background: #FFFFFF;
				border-radius: 11px;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				border: 1px solid #000000;
				padding: 4rpx 16rpx;
			}
		}
		.center{
			margin:12rpx 60rpx 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
		}
		.bottom{
			padding: 16rpx 24rpx ;
			background: #F3F4F5;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
		}
	}
}
</style>
